    <style>
      :host {
        --cr-icon-button-fill-color: var(--google-grey-700);
        --cr-icon-button-icon-start-offset: 0;
        --cr-icon-button-icon-size: 20px;
        --cr-icon-button-size: 36px;
        --cr-icon-button-height: var(--cr-icon-button-size);
        --cr-icon-button-transition: 150ms ease-in-out;
        --cr-icon-button-width: var(--cr-icon-button-size);
        /* Copied from paper-fab.html. Prevents square touch highlight. */
        -webkit-tap-highlight-color: transparent;
        border-radius: 50%;
        color: var(--cr-icon-button-stroke-color,
            var(--cr-icon-button-fill-color));
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        height: var(--cr-icon-button-height);
        margin-inline-end: var(--cr-icon-button-margin-end,
            var(--cr-icon-ripple-margin));
        margin-inline-start: var(--cr-icon-button-margin-start);
        outline: none;
        overflow: hidden;
        user-select: none;
        vertical-align: middle;
        width: var(--cr-icon-button-width);
      }

      :host-context([chrome-refresh-2023]):host {
        --cr-icon-button-fill-color: currentColor;
        --cr-icon-button-size: 32px;
        position: relative;
      }

      :host(:hover) {
        background-color: var(--cr-icon-button-hover-background-color,
            var(--cr-hover-background-color));
      }

      :host(:focus-visible:focus) {
        box-shadow: inset 0 0 0 2px var(--cr-icon-button-focus-outline-color,
            var(--cr-focus-outline-color));
      }

      @media (forced-colors: active) {
        :host(:focus-visible:focus) {
          /* Use outline instead of box-shadow (which does not work) in Windows
             HCM. */
          outline: var(--cr-focus-outline-hcm);
        }
      }

      :host-context(html:not([chrome-refresh-2023])) :host(:active) {
        background-color: var(--cr-icon-button-active-background-color,
            var(--cr-active-background-color));
      }

      paper-ripple {
        display: none;
      }

      :host-context([chrome-refresh-2023]) paper-ripple {
        --paper-ripple-opacity: 1;
        color: var(--cr-active-background-color);
        display: block;
      }

      :host([disabled]) {
        cursor: initial;
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      :host(.no-overlap) {
        --cr-icon-button-margin-end: 0;
        --cr-icon-button-margin-start: 0;
      }

      :host-context([dir=rtl]):host(:not([dir=ltr]):not([multiple-icons_])) {
        transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
      }

      :host-context([dir=rtl]):host(:not([dir=ltr])[multiple-icons_])
          iron-icon {
        transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
      }

      :host(:not([iron-icon])) #maskedImage {
        -webkit-mask-image: var(--cr-icon-image);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: var(--cr-icon-button-icon-size);
        -webkit-transform: var(--cr-icon-image-transform, none);
        background-color: var(--cr-icon-button-fill-color);
        height: 100%;
        transition: background-color var(--cr-icon-button-transition);
        width: 100%;
      }

      @media (forced-colors: active) {
        :host(:not([iron-icon])) #maskedImage {
          background-color: ButtonText;
        }
      }

      #icon {
        align-items: center;
        border-radius: 4px;
        display: flex;
        height: 100%;
        justify-content: center;
        padding-inline-start: var(--cr-icon-button-icon-start-offset);
        /* The |_rippleContainer| must be position relative. */
        position: relative;
        width: 100%;
      }

      iron-icon {
        --iron-icon-fill-color: var(--cr-icon-button-fill-color);
        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color, none);
        --iron-icon-height: var(--cr-icon-button-icon-size);
        --iron-icon-width: var(--cr-icon-button-icon-size);
        transition: fill var(--cr-icon-button-transition),
            stroke var(--cr-icon-button-transition);
      }

      @media (prefers-color-scheme: dark) {
        :host {
          --cr-icon-button-fill-color: var(--google-grey-500);
        }
      }
    </style>
    <div id="icon">
      <div id="maskedImage"></div>
    </div>
